<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI+ Home - 智能AI服务平台演示</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background-color: #f5f5f7;
      color: #1d1d1f;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .header {
      text-align: center;
      padding: 40px 0;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      color: white;
      border-radius: 8px;
      margin-bottom: 40px;
    }
    
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }
    
    .logo svg {
      width: 60px;
      height: 60px;
      margin-right: 16px;
    }
    
    .logo-text {
      font-size: 32px;
      font-weight: bold;
    }
    
    .header h1 {
      margin: 0;
      font-size: 36px;
      margin-bottom: 16px;
    }
    
    .header p {
      margin: 0;
      font-size: 18px;
      opacity: 0.9;
    }
    
    .section {
      background: white;
      border-radius: 8px;
      padding: 40px;
      margin-bottom: 30px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .section h2 {
      color: #3730a3;
      margin-top: 0;
      margin-bottom: 24px;
      border-bottom: 2px solid #e5e7eb;
      padding-bottom: 12px;
    }
    
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-bottom: 32px;
    }
    
    .feature-card {
      background: #f8fafc;
      border-radius: 8px;
      padding: 24px;
      border-left: 4px solid #4f46e5;
      transition: transform 0.2s ease;
    }
    
    .feature-card:hover {
      transform: translateY(-4px);
    }
    
    .feature-card h3 {
      color: #4f46e5;
      margin-top: 0;
      margin-bottom: 12px;
    }
    
    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
    }
    
    .product-card {
      background: #f8fafc;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .product-image {
      height: 200px;
      background-color: #e2e8f0;
      background-size: cover;
      background-position: center;
    }
    
    .product-info {
      padding: 20px;
    }
    
    .product-title {
      margin: 0 0 8px 0;
      font-size: 18px;
    }
    
    .product-price {
      color: #4f46e5;
      font-weight: bold;
      margin: 0 0 12px 0;
    }
    
    .button {
      display: inline-block;
      background: #4f46e5;
      color: white;
      padding: 12px 24px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 500;
      transition: background 0.2s ease;
    }
    
    .button:hover {
      background: #4338ca;
    }
    
    .auth-section {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 32px;
    }
    
    .login-info {
      text-align: center;
      margin-top: 40px;
      padding: 24px;
      background: #f3e8ff;
      border-radius: 8px;
    }
    
    .login-info p {
      margin: 8px 0;
    }
    
    .code-block {
      background: #1f2937;
      color: #e5e7eb;
      padding: 16px;
      border-radius: 6px;
      font-family: 'Courier New', monospace;
      overflow-x: auto;
      margin: 20px 0;
    }
    
    .footer {
      text-align: center;
      padding: 20px;
      color: #6b7280;
      font-size: 14px;
    }
    
    .note {
      background: #fef3c7;
      border: 1px solid #f59e0b;
      border-radius: 6px;
      padding: 16px;
      margin: 24px 0;
    }
    
    .quick-links {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 32px;
      justify-content: center;
    }
    
    .link-card {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      padding: 24px;
      text-align: center;
      width: 280px;
      transition: all 0.2s ease;
    }
    
    .link-card:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
    
    .link-card h3 {
      margin-top: 0;
      margin-bottom: 12px;
      color: #3730a3;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="logo">
        <svg width="60" height="60" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
          <!-- 变形金刚头部轮廓 -->
          <path d="M40 12L16 28v28l24 16 24-16V28L40 12z" stroke="white" stroke-width="4" fill="none"></path>
          <!-- 额头细节 -->
          <path d="M30 24L40 16l10 8" stroke="white" stroke-width="3" fill="none"></path>
          <!-- 眼睛 -->
          <path d="M32 36h4M44 36h4" stroke="white" stroke-width="3" stroke-linecap="round"></path>
          <!-- 面罩/嘴部 -->
          <path d="M32 46h16v6H32z" fill="white"></path>
          <!-- 天线/耳朵 -->
          <path d="M24 28v-6M56 28v-6" stroke="white" stroke-width="3" stroke-linecap="round"></path>
          <!-- 下巴 -->
          <path d="M36 60h8" stroke="white" stroke-width="3" stroke-linecap="round"></path>
        </svg>
        <div class="logo-text">AI+ Home</div>
      </div>
      <h1>AI+ Home 智能平台演示</h1>
      <p>让AI技术触手可及，赋能美好生活</p>
    </div>
    
    <div class="quick-links">
      <a href="index.html" class="link-card">
        <h3>打开主应用</h3>
        <p>访问完整的Vue应用界面（后端不可用时会使用模拟数据）</p>
      </a>
      <a href="start-app.html" class="link-card">
        <h3>启动指南</h3>
        <p>查看如何正确启动前后端服务的详细指南</p>
      </a>
    </div>
    
    <div class="section">
      <h2>平台介绍</h2>
      <p>AI+ Home是一个集智能语音识别、视觉分析、自然语言处理和智能对话交互于一体的综合性AI服务平台。</p>
      
      <div class="features">
        <div class="feature-card">
          <h3>智能语音识别</h3>
          <p>提供99.5%以上识别准确率的多语言语音转文字服务，支持实时流式识别与批量处理</p>
        </div>
        <div class="feature-card">
          <h3>视觉分析服务</h3>
          <p>基于深度学习的高精度物体识别、场景理解与图像分析服务</p>
        </div>
        <div class="feature-card">
          <h3>自然语言处理</h3>
          <p>提供情感分析、关键词提取、文本分类等企业级文本理解能力</p>
        </div>
      </div>
      
      <div class="note">
        <strong>注意：</strong>前端应用已优化，即使后端服务不可用，也会自动切换到模拟数据模式，保证基本功能可用。
      </div>
    </div>
    
    <div class="section">
      <h2>AI产品展示</h2>
      <div class="product-grid">
        <div class="product-card">
          <div class="product-image" style="background-image: url('https://picsum.photos/id/1/400/300');"></div>
          <div class="product-info">
            <h3 class="product-title">AI音箱Pro</h3>
            <p class="product-price">¥999.00</p>
            <p>智能语音交互，高品质音质，支持多房间互联</p>
          </div>
        </div>
        <div class="product-card">
          <div class="product-image" style="background-image: url('https://picsum.photos/id/20/400/300');"></div>
          <div class="product-info">
            <h3 class="product-title">全景智能监控系统</h3>
            <p class="product-price">¥2999.00</p>
            <p>360度全景监控，AI人脸识别，异常行为检测</p>
          </div>
        </div>
        <div class="product-card">
          <div class="product-image" style="background-image: url('https://picsum.photos/id/0/400/300');"></div>
          <div class="product-info">
            <h3 class="product-title">数据分析平台</h3>
            <p class="product-price">¥5999.00</p>
            <p>智能数据分析，趋势预测，业务洞察</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="section">
      <h2>登录与注册</h2>
      <p>您可以使用以下测试账号登录，或注册新账号体验平台功能：</p>
      
      <div class="login-info">
        <h3>测试账号信息</h3>
        <p><strong>用户名：</strong> testuser</p>
        <p><strong>密码：</strong> 123456</p>
        <p><strong>管理员账号：</strong> admin / admin123</p>
      </div>
      
      <p>在完整版本中，您可以通过这些功能：</p>
      <ul>
        <li>访问个人仪表盘</li>
        <li>管理API密钥</li>
        <li>查看使用统计</li>
        <li>订阅AI服务</li>
      </ul>
    </div>
    
    <div class="section">
      <h2>如何运行完整应用</h2>
      <p>要运行完整的前后端应用，请按照以下步骤操作：</p>
      
      <h3>后端服务</h3>
      <div class="code-block">
# 确保Java环境已安装
java -version

# 编译并运行Spring Boot应用
cd d:/code/agent
mvn spring-boot:run
      </div>
      
      <h3>前端服务</h3>
      <div class="code-block">
# 确保Node.js环境已安装
node -v
npm -v

# 安装依赖并启动前端
cd d:/code/agent
npm install
npm run dev
      </div>
      
      <h3>构建前端应用</h3>
      <div class="code-block">
# 构建生产版本
cd d:/code/agent
npm run build

# 预览构建结果
npm run preview
      </div>
      
      <div class="note">
        <strong>注意：</strong>如果遇到权限问题，请使用管理员权限运行命令提示符或PowerShell，并执行以下命令修改执行策略：
        <div class="code-block">
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
        </div>
      </div>
    </div>
    
    <div class="section">
      <h2>测试文件说明</h2>
      <p>项目中包含了完整的测试套件：</p>
      <ul>
        <li><strong>单元测试：</strong>针对控制器、服务层和工具类的测试</li>
        <li><strong>集成测试：</strong>API端到端测试</li>
        <li><strong>性能测试：</strong>JWT性能基准测试</li>
      </ul>
      <p>查看 <strong>TESTING.md</strong> 文件了解更多测试相关信息。</p>
    </div>
    
    <div class="footer">
      <p>&copy; 2024 AI+ Home 智能平台. 保留所有权利。</p>
    </div>
  </div>
  
  <script>
    // 简单的交互模拟
    document.addEventListener('DOMContentLoaded', function() {
      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
          e.preventDefault();
          const target = document.querySelector(this.getAttribute('href'));
          if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
          }
        });
      });
    });
  </script>
</body>
</html>